<template>
    <div class="magin">
            <el-tabs type="card">
            <el-tab-pane label="综合">
                <div class="aee">
                    <section v-for="(item,i) in list" :key="i">
                        <router-link :to="'/darticu/'+item.id">
                            <img :src="item.img" alt="">
                            <p class="name">{{item.name}}</p>
                            <p class="price">¥{{item.price}}</p>
                        </router-link>
                    </section>
                </div>
            </el-tab-pane>
           <!--  <el-tab-pane label="销量">销量</el-tab-pane>
            <el-tab-pane label="价格">价格</el-tab-pane>
           <el-tab-pane label="新品">新品</el-tab-pane> -->
        
        </el-tabs>  
    </div>
</template>

<script>
import {getList} from '../api/list'
    export default {
        data() {
            return {
                names:"",
                list:[],
            }
        },
        mounted() {
             this.names = this.$route.query.names
      console.log(this.names);
            this.shopList()
        },

        methods: {
            shopList(){
                getList().then(res=>{
                    console.log(res.data);
                    this.list =  res.data.filter(item=> item.type == this.names)
                    console.log(this.list);
                })
            }
        },
    }
</script>

<style scoped>
.magin{
    margin-top: 8vh;
}
.aee{
    width: 100%;
    display: flex;
    justify-content:space-around;
    flex-wrap: wrap;
}
section{
    width: 45%;
    height: 35vh;
    background: rgb(243, 243, 243);
    border-radius: 16px;
    text-align: center;
    margin-bottom: 2vh;
}
img{
    width: 40vw;
    height: 20vh;
    margin-top: 1.5vh;
}
.name{
    line-height: 4vh;
    color: rgb(73, 71, 72);
}
.price{
    color: rgba(255, 87, 51, 1);
    line-height: 6vh;
}
</style>